<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';

import { defineEmits, ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';

import { Button, Input, Space } from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getSpuBom } from '#/api/spuBom';

// 定义要发送的事件
type EmitEvents = {
  pushData: {};
};
const emit = defineEmits<EmitEvents>();

const [Modal, modalApi] = useVbenModal({
  class: 'w-4/6',
  footer: false,
  onCancel() {
    modalApi.close();
  },
  onConfirm() {},
});

const gridOptions: VxeTableGridOptions = {
  checkboxConfig: {
    highlight: true,
    labelField: 'name',
  },
  columns: [
    {
      type: 'checkbox', // 多选列（自带全选框）
      width: 50, // 列宽
      align: 'center', // 居中
      fixed: 'left', // 固定在最左侧
      title: '', // 表头文字
    },
    { title: 'BOM类型', field: 'bom_type', width: 80 },
    { title: 'BOM助记码', field: 'mnemonic_code', width: 110 },
    { title: '货号', field: 'goods_no', width: 110 },
    { title: '简码', field: 'template_no', width: 110 },
    { title: '供应商', field: 'SupplyNa', width: 110 },
    { title: '采购单号', field: 'goods_purchase_sn', width: 110 },
    { title: '采购性质', field: 'gpTypeText', width: 110 },

    { title: 'BOM单号', field: 'bom_code', width: 150 },
    { title: '状态', field: 'state_name', width: 70 },
    { title: '创建人', field: 'create_name', width: 90 },
    { title: '创建时间', field: 'create_date', width: 170 },
    { title: '修改人', field: 'update_name', width: 90 },
    { title: '修改时间', field: 'update_date', width: 170 },
    {
      field: 'action',
      title: '操作',
      fixed: 'right',
      width: 80,
      slots: { default: 'action' },
    },
  ],
  exportConfig: {},
  keepSource: true,
  proxyConfig: {
    ajax: {
      query: async ({ page }) => {
        console.log(111);
        // 1. 过滤空值
        // 2. 调接口
        const res = await getSpuBom({
          page: page.currentPage,
          limit: page.pageSize,
          quick_search: quick_search.value,
        });
        return { items: res.list, total: res.total };
      },
    },
    sort: true,
  },
  toolbarConfig: {
    search: true,
    custom: true,
    export: true,
    // import: true,
    refresh: true,
    zoom: true,
  },
};

const [Grid, gridApi] = useVbenVxeGrid({ gridOptions });

/**
 *  快速查询查询
 */
const quick_search = ref();
function doSearch() {
  gridApi.query();
}

/**
 * 处理推送按钮点击事件
 */
function handlePush(row: any) {
  // 发送数据到父组件，确保总是数组格式
  emit('pushData', row);
  // 关闭模态框
  modalApi.close();
}
</script>

<template>
  <Modal title="拷贝其他款BOM">
    <Grid>
      <template #toolbar-tools>
        <Input
          v-model:value="quick_search"
          allow-clear
          placeholder="助记码/单号/货号/简码/采购单号"
          style="width: 300px; margin-right: 8px"
          @change="doSearch"
        />
      </template>
      <template #action="{ row }">
        <Space>
          <Button
            type="primary"
            class="my-green-btn"
            size="small"
            @click="handlePush(row)"
          >
            选择
          </Button>
        </Space>
      </template>
    </Grid>
  </Modal>
</template>
<style lang="scss" scoped></style>
